<template>
  <div class="statistics-out">
    <div class="dashboard-name"></div>
    <div class="statistics-header">
      <el-row :gutter="20">
        <el-col :span="6" class="statistics-col">
          <div class="statistics">
            <div class="statistics-name">
              <span>累计授信金额</span>
            </div>
            <div class="statistics-num">
              ¥{{ summaryData.creditTotalAmount / 100 }}
              <div class="statistics-title">元</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="statistics-col">
          <div class="statistics">
            <div class="statistics-name">
              <span>累计授信用户数</span>
            </div>
            <div class="statistics-num">
              {{ summaryData.creditTotalUser }}
              <div class="statistics-title">人</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="statistics-col">
          <div class="statistics">
            <div class="statistics-name">
              <span>当日授信金额</span>
            </div>
            <div class="statistics-num">
              {{ summaryData.creditPassAmount / 100 }}
              <div class="statistics-title">元</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="statistics-col">
          <div class="statistics">
            <div class="statistics-name">
              <span>当日授信用户数</span>
            </div>
            <div class="statistics-num">
              {{ summaryData.creditPassUserCount }}
              <div class="statistics-title">人</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" class="statistics-col">
          <div class="statistics">
            <div class="statistics-name">
              <span>当日申请人数</span>
            </div>
            <div class="statistics-num">
              {{ summaryData.creditUserCount }}
              <div class="statistics-title">人</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="statistics-col">
          <div class="statistics">
            <div class="statistics-name">
              <span>审核中人数</span>
            </div>
            <div class="statistics-num">
              {{ summaryData.creditInAuditUserCount }}
              <div class="statistics-title">人</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="statistics-col">
          <div class="statistics">
            <div class="statistics-name">
              <span>当日用信金额</span>
            </div>
            <div class="statistics-num">
              ¥{{ summaryData.drawPassAmount / 100 }}
              <div class="statistics-title">元</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="statistics-col">
          <div class="statistics">
            <div class="statistics-name">
              <span>当日用信用户数</span>
            </div>
            <div class="statistics-num">
              {{ summaryData.drawPassUserCount }}
              <div class="statistics-title">人</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="statistics-center">
      <div class="statistics-center-left">
        <div class="title">授信趋势图</div>
        <div id="userLine" ref="userLine"></div>
      </div>
    </div>

    <div class="statistics-footer">
      <div class="statistics-footer-left">
        <div class="title">金额分布图</div>
        <div id="userPie3" ref="userPie3"></div>
      </div>
      <div class="statistics-footer-center">
        <div class="title">年龄维度</div>
        <div id="userPie1" ref="userPie1"></div>
      </div>
      <div class="statistics-footer-right">
        <div class="title">地域维度</div>
        <div id="userPie2" ref="userPie2"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import reportTest1 from '@/assets/report/report-test1.png'
import { parseTime } from '@/utils/index'
import LineConfig from './dashboardLine'
import Pie1Config from './dashboardPie1'
import Pie2Config from './dashboardPie2'
import Pie3Config from './dashboardPie3'
import {
  getSummaryData,
  getUserageData,
  gethoursData,
  getProvinceData,
  getamountData
} from '@/api/risksystem/dashboard/index'

@Component({
  name: 'report-test1',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({ default: '' }) private propExp1!: string
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private lineData = {}
  private summaryData = {}
  private datePicker = []
  private testConfig: any = {
    begin: '',
    end: ''
    // source: '360'
  }
  private pickerOption = {
    disabledDate(time: any) {
      let curDate = new Date().getTime()
      let month = 30 * 24 * 3600 * 1000
      let oneMonth = curDate - month
      return time.getTime() > Date.now() || time.getTime() < oneMonth
    }
  }
  get dayStand() {
    //computed 属性
    let dateTime = 1000 * 60 * 60 * 24
    return (
      Math.floor(
        (Date.parse(this.testConfig.end) - Date.parse(this.testConfig.begin)) /
          dateTime
      ) + 1
    )
  }
  @Watch('datePicker')
  private onDatePickerChange(value: boolean) {
    this.testConfig.begin = this.datePicker
      ? parseTime(this.datePicker[0])
      : undefined
    this.testConfig.end = this.datePicker
      ? parseTime(this.datePicker[1])
      : undefined
  }
  created() {
    // 最早可以调用vue组件method的钩子
    // this.clickSetOption()
    this.getDashboardList()
  }
  mounted() {
    //mounted 钩子
    this.getLineData()
    this.getAgeData()
    this.getprovinceData()
    this.getamountData()
  }
  private methodExp() {
    // method创建地方
  }
  // 汇总
  private async getDashboardList() {
    const { data } = await getSummaryData()
    this.summaryData = data.stats
  }
  // 进件分时统计
  private async getLineData() {
    const { data } = await gethoursData()
    let chart = new LineConfig('userLine')
    chart.setOption(data)
  }
  // 金额分布
  private async getamountData() {
    const { data } = await getamountData()
    let chart = new Pie3Config('userPie3')
    var legend = data.stats.map(function(item: any) {
      return item.name
    })
    chart.setOption(data.stats, legend)
  }
  // 获取年龄分布
  private async getAgeData() {
    const { data } = await getUserageData()
    let chart = new Pie1Config('userPie1')
    var legend = data.stats.map(function(item: any) {
      return item.name
    })
    console.log(data.stats)
    chart.setOption(data.stats, legend)
  }
  // 获取省份分布
  private async getprovinceData() {
    const { data } = await getProvinceData()
    let chart = new Pie2Config('userPie2')
    var legend = data.stats.map(function(item: any) {
      return item.name
    })
    chart.setOption(data.stats, legend)
  }
}
</script>

<style lang="scss" scoped>
.statistics-out {
  width: 100%;
  height: 100%;
  padding: 0 24px 24px 24px;
  background: url('./../../../assets/risk-dashboard/bg.png') no-repeat center;
  background-size: 100% 100%;
  .dashboard-name {
    width: 100%;
    height: 130px;
    background: url('./../../../assets/risk-dashboard/title.png') no-repeat
      center;
    background-size: contain;
  }
  .statistics-header {
    width: 100%;
    height: auto;
    padding: 24px 24px 0;
    margin: 0 0 24px 0 !important;
    background: url('./../../../assets/risk-dashboard/header-bg.png') no-repeat
      center;
    background-size: 100% 100%;
    .statistics-col {
      display: flex;
    }
    .statistics {
      width: 100%;
      border-radius: 2px;
      font-size: 16px;
      margin-bottom: 35px;
      background: url('./../../../assets/risk-dashboard/header-title-bg.png')
        no-repeat center;
      background-size: 100% 100%;
      .statistics-num {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 52px;
        padding: 10px;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: bold;
        white-space: nowrap;
        text-align: center;
        color: rgba(111, 231, 252, 1);
        .statistics-title {
          width: 21px;
          height: 20px;
          font-size: 22px;
          font-family: PingFang SC;
          font-weight: 800;
          color: rgba(111, 231, 252, 1);
          position: absolute;
          bottom: 40%;
          right: 0px;
        }
      }
      .statistics-name {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        margin-bottom: 40px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(108, 225, 251, 1);
      }
    }
  }

  .statistics-center {
    background: url('./../../../assets/risk-dashboard/center-bg.png') no-repeat
      center;
    background-size: 100% 100%;
    margin-bottom: 24px;
    .statistics-center-left {
      flex: 1;
      #userLine {
        width: 100%;
        height: 471px;
      }
    }
  }
  .statistics-footer {
    display: flex;
    .statistics-footer-left {
      width: 33.3%;
      margin-right: 24px;
      background: url('./../../../assets/risk-dashboard/footer-bg.png')
        no-repeat center;
      background-size: 100% 100%;
      #userPie3 {
        width: 100%;
        height: 350px;
      }
    }
    .statistics-footer-center {
      width: 33.3%;
      margin-right: 24px;
      background: url('./../../../assets/risk-dashboard/footer-bg.png')
        no-repeat center;
      background-size: 100% 100%;
      #userPie1 {
        width: 100%;
        height: 350px;
      }
    }
    .statistics-footer-right {
      width: 33.3%;
      background: url('./../../../assets/risk-dashboard/footer-bg.png')
        no-repeat center;
      background-size: 100% 100%;
      #userPie2 {
        width: 100%;
        height: 350px;
      }
    }
  }
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
  .title {
    color: rgba(108, 225, 251, 1);
    padding: 24px;
    font-size: 22px !important;
    background: url('./../../../assets/risk-dashboard/title-bg.png') no-repeat
      146px 34px !important;
    background-size: 72px 12px !important;
  }
  .statistics {
    margin-bottom: 25px !important;
    .statistics-num {
      height: 37px !important;
      padding: 4px !important;
      font-size: 22px !important;
      color: rgba(111, 231, 252, 1);
      .statistics-title {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
      }
    }
    .statistics-name {
      margin-bottom: 30px !important;
      font-size: 16px !important;
    }
  }
}
.title {
  color: rgba(108, 225, 251, 1);
  padding: 24px;
  font-size: 29px;
  background: url('./../../../assets/risk-dashboard/title-bg.png') no-repeat
    146px 34px;
  background-size: 132px 18px;
}
.font-color {
  color: #6ce1fb;
}
</style>
